<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画篇</title>
	<!--百度jQueryCDN-->
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
		$(document).ready(function() {
			//hide
			$("#btn1").click(function() {
				$("div").hide();
			});

			//show
			$("#btn2").click(function() {
				$("div").show();
			});

			//toggle
			$("#btn3").click(function() {
				$("div").toggle();
			});

			//slideUp
			$("#btn4").click(function() {
				$("div").slideUp("slow");
			});

			//slideDown
			$("#btn5").click(function() {
				$("div").slideDown("slow");
			});

			//slideToggle
			$("#btn6").click(function() {
				$("div").slideToggle("slow");
			});

			//fadeOut
			$("#btn7").click(function() {
				$("div").fadeOut("slow");
			});

			//fadeIn
			$("#btn8").click(function() {
				$("div").fadeIn("slow");
			});

			//fadeToggle
			$("#btn9").click(function() {
				$("div").fadeToggle("slow");
			});

			//animate
			$("#btn10").click(function() {
				$("div").animate({width:"300px",height:"300px",background:"green"}, "slow");
			});
		});
	</script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		div {
			width: 100%;
			height:150px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div>
		
	</div>
	<button id="btn1">hide</button>
	<button id="btn2">show</button>
	<button id="btn3">toggle</button>
	<button id="btn4">slideUp</button>
	<button id="btn5">slideDown</button>
	<button id="btn6">slideToggle</button>
	<button id="btn7">fadeOut</button>
	<button id="btn8">fadeIn</button>
	<button id="btn9">fadeToggle</button>
	<button id="btn10">animate</button>
</body>
</html>